<!doctype html>
<html>
  <head>

    <meta charset="utf-8"/>
    <title>FSS | Canvas Basic Example</title>
    <meta name="author" content="Matthew Wagerfield"/>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no"/>

    <style>
    body {
      background: #111118;
      margin: 0;
    }
    .container {
      position: absolute;
      height: 100%;
      width: 100%;
    }
    </style>

  </head>
  <body>

    <div id="container" class="container">
    </div>

    <script src="../deploy/fss.js"></script>
    <script>

    var container = document.getElementById('container');
    var renderer = new FSS.CanvasRenderer();
    var scene = new FSS.Scene();
    var light = new FSS.Light('#111122', '#FF0022');
    var geometry = new FSS.Plane(600, 400, 6, 4);
    var material = new FSS.Material('#FFFFFF', '#FFFFFF');
    var mesh = new FSS.Mesh(geometry, material);
    var now, start = Date.now();

    function initialise() {
      scene.add(mesh);
      scene.add(light);
      container.appendChild(renderer.element);
      window.addEventListener('resize', resize);
    }

    function resize() {
      renderer.setSize(container.offsetWidth, container.offsetHeight);
    }

    function animate() {
      now = Date.now() - start;
      light.setPosition(300*Math.sin(now*0.001), 200*Math.cos(now*0.0005), 60);
      renderer.render(scene);
      requestAnimationFrame(animate);
    }

    initialise();
    resize();
    animate();

    </script>

  </body>
</html>
